import React, { useEffect, useState } from 'react';
import { Link } from 'react-router-dom';
import { XIcon } from 'lucide-react';
export function CookieBanner() {
  const [isVisible, setIsVisible] = useState(false);
  useEffect(() => {
    // Check if user has already accepted cookies
    const cookiesAccepted = localStorage.getItem('cookiesAccepted');
    if (!cookiesAccepted) {
      // Show banner after a short delay for better UX
      const timer = setTimeout(() => {
        setIsVisible(true);
      }, 1000);
      return () => clearTimeout(timer);
    }
  }, []);
  const acceptCookies = () => {
    localStorage.setItem('cookiesAccepted', 'true');
    setIsVisible(false);
  };
  if (!isVisible) return null;
  return <div className="fixed bottom-0 left-0 right-0 bg-white shadow-lg z-50 border-t border-gray-200">
      <div className="container mx-auto px-4 py-4">
        <div className="flex flex-col md:flex-row items-start md:items-center justify-between">
          <div className="pr-8 mb-4 md:mb-0">
            <h3 className="font-semibold text-lg mb-2">
              We Value Your Privacy
            </h3>
            <p className="text-gray-600 text-sm">
              We use cookies to enhance your browsing experience, serve
              personalized ads or content, and analyze our traffic. By clicking
              "Accept All", you consent to our use of cookies. Read our{' '}
              <Link to="/privacy" className="text-[#d4a373] hover:underline">
                Privacy Policy
              </Link>{' '}
              to learn more.
            </p>
          </div>
          <div className="flex flex-shrink-0 space-x-3">
            <Link to="/privacy" className="px-4 py-2 border border-gray-300 rounded-md text-sm font-medium hover:bg-gray-50 transition-colors">
              Cookie Settings
            </Link>
            <button onClick={acceptCookies} className="px-4 py-2 bg-[#d4a373] text-white rounded-md text-sm font-medium hover:bg-[#c99b6e] transition-colors">
              Accept All
            </button>
            <button onClick={acceptCookies} className="p-1 text-gray-500 hover:text-gray-700" aria-label="Close cookie banner">
              <XIcon size={20} />
            </button>
          </div>
        </div>
      </div>
    </div>;
}